import React, { Component } from "react";
// 引入 echarts 主模块。
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "./index.less";

class ECharts extends Component {
  componentDidMount() {
    this.initCharts();
  }

  initCharts = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    let option = {
      title: { text: "ECharts 入门示例" },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    myChart.setOption(option)
  };

  render() {
    return <div id="main" style={{ width: 400, height: 400 }}></div>;
  }
}

export default ECharts;
